<template>
  <div class="main-content">
    <h2 style="margin-bottom:20px;">生产管理 - 生产计划</h2>
    <el-form :inline="true" :model="searchForm" class="form-content">
      <el-form-item label="计划名称">
        <el-input v-model="searchForm.name" placeholder="请输入计划名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="全部" clearable>
          <el-option label="未开始" value="未开始" />
          <el-option label="进行中" value="进行中" />
          <el-option label="已完成" value="已完成" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="success" @click="openDialog()">新增计划</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" style="width: 100%;margin-top:20px;" border>
      <el-table-column prop="name" label="计划名称" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column prop="gongdan" label="工单" align="center" />
      <el-table-column prop="shebei" label="设备" align="center" />
      <el-table-column prop="yuangong" label="员工" align="center" />
      <el-table-column prop="date" label="日期" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px;"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, jumper"
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      :page-sizes="[10, 20, 50]"
      background
    />
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已完成" value="已完成" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单" prop="gongdan">
          <el-input v-model="form.gongdan" placeholder="请输入工单号" />
        </el-form-item>
        <el-form-item label="设备" prop="shebei">
          <el-select v-model="form.shebei" placeholder="请选择设备">
            <el-option v-for="item in shebeiOptions" :key="item.id" :label="item.shebeimingcheng" :value="item.shebeimingcheng" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工" prop="yuangong">
          <el-select v-model="form.yuangong" placeholder="请选择员工">
            <el-option v-for="item in yuangongOptions" :key="item.id" :label="item.xingming" :value="item.xingming" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getShengchanList, addShengchan, updateShengchan, deleteShengchan } from '@/utils/shengchanLocal';
import { getShebeiList } from '@/utils/shebeixinxiLocal';
import { getRenyuanList } from '@/utils/renyuanLocal';
export default {
  data() {
    return {
      searchForm: { name: '', status: '' },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dialogVisible: false,
      dialogTitle: '新增计划',
      form: { id: '', name: '', status: '', gongdan: '', shebei: '', yuangong: '', remark: '', date: '' },
      rules: {
        name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        gongdan: [{ required: true, message: '请输入工单号', trigger: 'blur' }],
        shebei: [{ required: true, message: '请选择设备', trigger: 'change' }],
        yuangong: [{ required: true, message: '请选择员工', trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
      },
      shebeiOptions: [],
      yuangongOptions: [],
    };
  },
  created() {
    this.getDataList();
    this.shebeiOptions = getShebeiList();
    this.yuangongOptions = getRenyuanList();
  },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    getDataList() {
      let list = getShengchanList();
      if (this.searchForm.name) list = list.filter(i => i.name.includes(this.searchForm.name));
      if (this.searchForm.status) list = list.filter(i => i.status === this.searchForm.status);
      this.totalPage = list.length;
      const start = (this.pageIndex-1)*this.pageSize;
      this.dataList = list.slice(start, start+this.pageSize);
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    },
    openDialog(row) {
      if (row) {
        this.dialogTitle = '编辑计划';
        this.form = { ...row };
      } else {
        this.dialogTitle = '新增计划';
        this.form = { id: '', name: '', status: '', gongdan: '', shebei: '', yuangong: '', remark: '', date: '' };
      }
      this.dialogVisible = true;
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        if (this.form.id) {
          updateShengchan(this.form);
          this.$message.success('修改成功');
        } else {
          addShengchan(this.form);
          this.$message.success('新增成功');
        }
        this.dialogVisible = false;
        this.getDataList();
      });
    },
    deleteHandler(id) {
      this.$confirm('确定要删除该计划吗？', '提示', { type: 'warning' }).then(() => {
        deleteShengchan([id]);
        this.getDataList();
        this.$message.success('删除成功');
      });
    },
  }
}
</script>
